window.onload = function () {
    var inputData = {
        topNum: 10
    };
    init(inputData);
    function init(data){
        $.ajax({
            type: "POST",
            url: "valueFallDistributedData",
            data:data,
            success: function (msg){
                if(msg.status=="false"){
                    return
                }else{
                    var allData = [];
                    var legendData = [];
                    var barSeriesData = [];
                    var lineSeriesData = [];

                    var topNum = data.topNum;
                    var length = msg.result.length
                    if (topNum > length) {
                        toastr.warning('注意：小区数量不足！');
                    }
                    allData=msg.result;
                    allData.forEach(function (data,index) {
                        legendData[index] = data.community_name.trim();
                        barSeriesData[index] = {
                            name:data.community_name,
                            value:data.amount
                        }
                        lineSeriesData[index] = {
                            name:data.community_name,
                            value:data.add_rate
                        }
                    });
                    doCharts(legendData,barSeriesData,lineSeriesData);
                }
            }
        });
    }
    function doCharts(legendData,barSeriesData,lineSeriesData){
        var option4 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                },
                formatter: function(params) {
                    var res = '<div>';
                    res += '<strong>' + params[0].name + '</strong>'
                    for (var i = 0, l = params.length; i < l; i++) {
                        if (params[i].seriesName == '押品数量') {
                            res += '<br/>' + params[i].seriesName + ' : ' + params[i].value + ' 个'
                        }
                        if (params[i].seriesName == '下跌空间') {
                            res += '<br/>' + params[i].seriesName + ' : ' + params[i].value.toFixed(2) + '%'
                        }
                    }
                    res += '</div>';
                    return res;
                }
            },
            title: [{
                subtext: moment().format('YYYY-MM-DD'),
                left: '0%',
                top: '3%',
                textStyle: {
                    color: '#333'
                }
            }],
            legend: {
                // bottom:'0',
                data:['押品数量','下跌空间'],
                textStyle: {
                    color : "#ADADAD"
                },
            },
            grid: {
                left: '6%',
                right: '1%',
                top: '10%',
                bottom: '20%',
                containLabel: true
            },
            yAxis:  [
                {
                    type: 'value',
                    name: '押品数量',
                    position: 'left',
                    axisLabel: {
                        formatter: '{value} '
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#ADADAD',
                        }
                    },
                },
                {
                    type: 'value',
                    name: '下跌空间(单位:%)',
                    position: 'right',
                    axisLabel: {
                        formatter: '{value} %'
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#ADADAD',
                        }
                    },
                }
            ],
            xAxis: {
                type: 'category',
                axisLabel: {
                    interval: 0,
                    rotate: 90,
                },
                axisLine:{
                    lineStyle:{
                        color:'#ADADAD',
                    }
                },
                // axisPointer: {
                //     type: 'shadow'
                // },
                data : legendData
            },
            series : [
                {
                    name: '押品数量',
                    type: 'bar',
                    data:barSeriesData
                },
                {
                    name: '下跌空间',
                    type: 'line',
                    yAxisIndex: 1,
                    data:lineSeriesData
                }
            ]
        };

        var myChart = echarts.init($('#myChart4').get(0));
        myChart.setOption(option4);
        window.onresize = function () {
            myChart.resize()
        };
    }
    function searchDataAction(){
        var citys = $('#city').val(),
            districts = $('#district').val(),
            loansBalanceStarts = $('#loansBalanceStart').val(),
            loansBalanceEnds =  $('#loansBalanceEnd').val(),
            loansAmountStarts = $('#loansAmountStart').val(),
            loansAmountEnds = $('#loansAmountEnd').val(),
            startDateStarts = $('#startDateStart').val(),
            startDateEnds = $('#startDateEnd').val(),
            loansDurations = $('#loansDuration').val(),
            risk = $('#risk').val(),
            buildAreaEnds = $('#buildAreaEnd').val(),
            buildAreaStarts = $('#buildAreaStart').val(),
            endDateStarts = $('#endDateStart').val(),
            endDateEnds = $('#endDateEnd').val(),
            topNum = $("#topNum").val(),
            inputData = {
                city:citys,
                district:districts,
                loansBalanceStart:loansBalanceStarts,
                loansBalanceEnd:loansBalanceEnds,
                loansAmountStart:loansAmountStarts,
                loansAmountEnd:loansAmountEnds,
                startDateStart:startDateStarts,
                startDateEnd:startDateEnds,
                loansDuration:loansDurations,
                risk:risk,
                buildAreaEnd:buildAreaEnds,
                buildAreaStart:buildAreaStarts,
                endDateStart:endDateStarts,
                endDateEnd:endDateEnds,
                topNum: topNum
            };
        init(inputData)
    }
    $('#searchData').click(function(){
        searchDataAction();
    });
    $("#topNum").change(function(){
        searchDataAction();
    });
};